<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: linear-gradient(135deg, #409EFF 0%, #3a8ee6 100%)">
              <i class="el-icon-film"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日电影数</div>
              <div class="stat-value">12</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%)">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日观影人数</div>
              <div class="stat-value">256</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: linear-gradient(135deg, #e6a23c 0%, #d48b2f 100%)">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日订单数</div>
              <div class="stat-value">89</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f56c6c 0%, #e64242 100%)">
              <i class="el-icon-money"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日收入</div>
              <div class="stat-value">¥12,580</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>票房趋势</span>
            <el-radio-group v-model="chartTimeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-placeholder">
            <!-- 这里可以集成 ECharts 等图表库 -->
            <div class="chart-mock"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>电影类型分布</span>
          </div>
         <div class="chart-placeholder">
             <!-- 这里可以集成 ECharts 等图表库 -->
             <div ref="chartContainer" class="pie-chart-container">
                 <div class="Echarts">
                     <MyEcharts :size="'width:300px;height:300px'" :options="dynamicOptions" />
                 </div>
             </div>
         </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :span="12">
        <el-card shadow="hover" class="activity-card">
          <div slot="header" class="activity-header">
            <span>最近订单</span>
            <el-button type="text">查看全部</el-button>
          </div>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="movie" label="电影"></el-table-column>
            <el-table-column prop="amount" label="金额" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="activity-card">
          <div slot="header" class="activity-header">
            <span>系统通知</span>
            <el-button type="text">查看全部</el-button>
          </div>
          <div class="notification-list">
            <div v-for="(item, index) in notifications" :key="index" class="notification-item">
              <i :class="item.icon"></i>
              <div class="notification-content">
                <div class="notification-title">{{ item.title }}</div>
                <div class="notification-time">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
	//引入自定义的Echarts组件
	import MyEcharts from '@/components/ChartsComponent'
	
	import{statisMovieTypeApi}from'@/api/statis'
export default {
  	name:'HomeView',
  	components:{
  		MyEcharts
  	},
  data() {
    return {
      chartTimeRange: 'week',
	  dynamicOptions:{
  title: {
    text: '电影类型分布图',
    subtext: '非凡影业',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '电影类型饼状统计图',
      type: 'pie',
      radius: '50%',
      data: [
        // { value: 1048, name: '动作片' },
        // { value: 735, name: '爱情片' },
        // { value: 580, name: '动画片' },
        // { value: 484, name: '悬疑片' },
        // { value: 300, name: '喜剧片' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
},
      recentOrders: [
        {
          orderNo: 'DD20240315001',
          movie: '流浪地球3',
          amount: '¥89',
          status: '已完成'
        },
        {
          orderNo: 'DD20240315002',
          movie: '熊出没·逆转时空',
          amount: '¥69',
          status: '已完成'
        },
        {
          orderNo: 'DD20240315003',
          movie: '热辣滚烫',
          amount: '¥79',
          status: '已完成'
        }
      ],
      notifications: [
        {
          icon: 'el-icon-bell',
          title: '系统更新通知',
          time: '10分钟前'
        },
        {
          icon: 'el-icon-warning',
          title: '影厅设备维护提醒',
          time: '30分钟前'
        },
        {
          icon: 'el-icon-info',
          title: '新电影上架通知',
          time: '1小时前'
        }
      ]
    }
  },
  created(){
	  this.handleStatisMovieType()
  },
  methods:{
	  async handleStatisMovieType(){
		  let {data}=await statisMovieTypeApi();
		  let list=data.results;
		  //console.log(list);
		  //console.log(this.dynamicOptions.series[0].data)
		  this.dynamicOptions.series[0].data=list;
		  
	  }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: #25262b;
  border: 1px solid #2d2e33;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
  color: #fff;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #a7a9b2;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #e0e0e0;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  background: #25262b;
  border: 1px solid #2d2e33;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-mock {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2d2e33 0%, #25262b 100%);
  border-radius: 4px;
}

.activity-row {
  margin-bottom: 20px;
}

.activity-card {
  background: #25262b;
  border: 1px solid #2d2e33;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-list {
  padding: 10px 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #2d2e33;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item i {
  font-size: 20px;
  color: #409EFF;
  margin-right: 12px;
  margin-top: 2px;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #a7a9b2;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #2d2e33;
}

:deep(.el-table) {
  background: transparent;
}

:deep(.el-table th) {
  background: #1d1e23;
  color: #a7a9b2;
  border-bottom: 1px solid #2d2e33;
}

:deep(.el-table td) {
  border-bottom: 1px solid #2d2e33;
}

:deep(.el-radio-button__inner) {
  background: #1d1e23;
  border-color: #2d2e33;
  color: #a7a9b2;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background: #409EFF;
  border-color: #409EFF;
  color: #fff;
}
</style> 